<template>
  <div class="pool-list">
    <el-card>
      <el-form class="pageQuery" label-position="top">
        <el-form-item v-for="(field) in list.search_field" :label="field.title">
          <el-date-picker v-if="field.type == 'date_cycle'" v-model="list.search[field.key]" type="month" :placeholder="field.placeholder" format="yyyyMM" value-format="yyyyMM"></el-date-picker>
          <el-select v-if="field.type == 'select'" :placeholder="field.placeholder" v-model="list.search[field.key]" multiple>
            <el-option v-for="(item, index) in  dic[field.dic]" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button :disabled="download.disabled"><download-excel :fetch="downExcel" :fields="download.header" :name="download.file_name">{{download.text}}</download-excel></el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <el-table :data="list.items" style="margin-bottom: 10px" border max-height="800">
        <el-table-column v-for="(field, index) in list.list_field" :key="index" :label="field.title" :prop="field.key" :width="field.width"></el-table-column>
        <template slot="empty">
          <myEmpty></myEmpty>
        </template>
      </el-table>
      <myPaging :queryInfo="list.search" :getListData="getList"></myPaging>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "poolList",
  data(){
    return {
      dic:{
        status:[],
        merchant:[],
        group: [],
      },
      list:{
        search:{
          page: 1,
          size: 10,
          total: 0,
          cycle: '',
          group_id: [],
          agent_app_id: [],
        },
        search_field:[
          {
            type: 'date_cycle',
            key: 'cycle',
            placeholder: '所有',
            title: '周期',
          },
          {
            type: 'select',
            key: 'group_id',
            placeholder: '所有',
            title: '套餐组',
            dic: this.$api.Enum.DicTypeComboGroupList,
          },
          {
            type: 'select',
            key: 'agent_app_id',
            placeholder: '所有',
            title: '应用商',
            dic: this.$api.Enum.DicTypeResellerList,
          },
        ],
        list_field: [
          {
            title: '套餐组',
            key: 'group_name',
          },
          {
            title: '应用商',
            key: 'agent_app_name',
          },
          {
            title: '运营商',
            key: 'operator_key_name',
          },
          {
            title: '分配数量',
            key: 'total_number',
          },
          {
            title: '使用数量',
            key: 'used_number',
          },
          {
            title: '单卡流量MB',
            key: 'base_flow',
          },
          {
            title: '总流量MB',
            key: 'total_flow',
          },
          {
            title: '使用流量MB',
            key: 'used_flow',
          },
          {
            title: '使用百分比',
            key: 'used_ratio',
          },
          {
            title: '统计时间',
            key: 'last_update_dt',
            width: 140,
          },
        ],
        items:[],
      },
      download: {
        text: '导出',
        file_name: '流量池导出.xls',
        disabled: false,
        header: {},
        search: {},
        items: [],
      },
    }
  },
  mounted(){
    this.$api.forbidHeader(this.list.search_field)
    if (this.list.search.cycle == ''){
      const t = new Date()
      this.list.search.cycle = t.getFullYear().toString() +''+ ((t.getMonth()+1).toString().padStart(2,0))
      console.log(this.list.search.cycle)
    }
    this.getDic()
    this.getList()
  },
  methods:{
    getList(){
      this.$api.combo.getPoolList(this.list.search, res=>{
        if (!res.status){
          return this.$message.error(res.message)
        }
        this.list.items = res.data.list;
        this.list.search.total = res.data.page.total;
      })
    },

    getDic(){
      let types = [
        this.$api.Enum.DicTypeResellerList,
        this.Enum.DicTypeComboGroupList,
      ]
      this.$api.foundation.dicListExtendCache(types, {}, res => {
        this.dic = res;
        this.dic[this.Enum.DicTypeComboGroupList] = res[this.Enum.DicTypeComboGroupList].filter((item)=>{
          return item.extend.flow_type == this.Enum.FlowTypePool
        })
      });
    },
    async downExcel() {
      if (this.download.disabled){
        return false
      }
      this.download.disabled = true
      this.download.text = '数据导出中,请稍等.'
      Object.assign(this.download.search, this.list.search)
      this.download.file_name = this.download.search.cycle+'-流量池导出.xlsx'
      this.download.header = {}
      this.download.items = []
      this.download.search.size = 500
      this.download.search.page = 1
      this.list.list_field.forEach(item =>{
        this.download.header[item.title] = item.key
      })
      this.getDownExcelData()
      this.download.disabled = false
      this.download.text = '导出'
      return this.download.items
    },
    getDownExcelData() {
      this.$api.combo.getPoolList(this.download.search, res=>{
        if (!res.status){
          return this.$message.error(res.message)
        }
        this.download.items.push(... res.data.list)
        if ((this.download.search.total - this.download.search.page * this.download.search.size) < 0 || res.data.page.total < this.download.search.size) {

        } else {
          this.download.search.page += 1
          this.download.search.total = res.data.page.total;
          this.getDownExcelData()
        }
      },{async:false})
    },
  }
}
</script>

<style scoped>

</style>